<template>
  <div class="indexBox">
    <div class="indexMessage">

      <div class="controlMessage">

        <div class="adminMessage">

          <div class="adminMessageTop">
            <img :src="adminMessage.img" alt="">
            <div>
              <p>{{adminMessage.name}}</p>
              <p>管路员</p>
            </div>
          </div>

          <div class="adminMessageBottom">
            <p>上次登陆地点:<span>{{adminMessage.addres}}</span></p>
            <p>上次登陆时间:<span>{{adminMessage.time}}</span></p>
          </div>

        </div>

        <div class="hobbyMessage">
          <h4>爱好偏向</h4>
          <div v-for="(item, index) in hobbyMessage" :key="index">
            <p>{{item.name}}</p>
            <el-progress  :percentage="item.percentage" :color="item.color"></el-progress>
          </div>

        </div>

      </div>

      <div class="indexCharts">

        <div class="categoryCharts">
          <div id="categoryCharts"></div>
        </div>

        <div class="otherCharts">
          <div id="verticalCharts"></div>
          <div id="circleCharts"></div>
        </div>
      </div>

    </div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      adminMessage: {
        img: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=045f823c1938534398c28f73f27adb1b/00e93901213fb80e4a9910873fd12f2eb9389411.jpg',
        addres: '北京',
        time: '2019-02-01',
        name: '大傻子'
      },
      hobbyMessage: [
        {
          name: '音乐',
          percentage: 20,
          customColor: '#409eff'
        }, {
          name: '音乐',
          percentage: 30,
          customColor: '#409eff'
        }, {
          name: '音乐',
          percentage: 30,
          customColor: '#409eff'
        }, {
          name: '音乐',
          percentage: 30,
          customColor: '#409eff'
        }
      ]

    }
  },

  components: { },

  created () {

  },

  mounted () {
    this.categoryCharts()
    this.verticalCharts()
    this.circleCharts()

    let that = this
    window.onresize = function () {
      that.categoryCharts()
      that.verticalCharts()
      that.circleCharts()
    }
  },

  methods: {
    categoryCharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('categoryCharts'))
      // 绘制图表
      myChart.setOption({
        title: { text: '折线图' },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      })
    },

    verticalCharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('verticalCharts'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ]
          }
        ]
      })
    },

    circleCharts () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('circleCharts'))
      // 绘制图表
      myChart.setOption({
        title: {
        },
        tooltip: {},
        legend: {},
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            {name: '销售（sales）', max: 6500},
            {name: '管理（Administration）', max: 16000},
            {name: '信息技术（Information Techology）', max: 30000},
            {name: '客服（Customer Support）', max: 38000},
            {name: '研发（Development）', max: 52000},
            {name: '市场（Marketing）', max: 25000}
          ]
        },
        series: [{
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: '预算分配（Allocated Budget）'
            },
            {
              value: [5000, 14000, 28000, 31000, 42000, 21000],
              name: '实际开销（Actual Spending）'
            }
          ]
        }]
      })
    }
  }
}
</script>

<style lang='scss' scoped type="text/css">

  h4 {
    color: #303133;
    font-size: 16px;
    padding: 0px 0px 18px 0px;
    border-bottom: 1px solid #EBEEF5;
    box-sizing: border-box;
    text-align: left;
  }

  .indexMessage {
    width: 100%;
    display: flex;
    justify-content: space-between;

      .controlMessage {
        width: 30%;
        max-width: 280px;

        .adminMessage {
          width: 100%;
          box-sizing: border-box;
          height: 260px;
          padding: 20px;
          background: #fff;
          .adminMessageTop {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #ccc;
            padding-bottom: 20px;
            img {
              width: 110px;
              height: 110px;
              border-radius: 60px;
              overflow: hidden;
            }
            div {
              width: 140px;
              p {
                line-height: 26px;
                text-align: right;
              }
              p:nth-child(1) {
                color: black;
                font-size: 20px;
                font-weight: 600;
              }
            }
          }
        }
        .adminMessageBottom {
          padding-top: 20px;
          p {
            width: 100%;
            text-align: left;
            line-height: 30px;
            color: #999;
            span {
              float: right;
            }
          }
        }

        .hobbyMessage {
          background-color: white;
          width: 100%;
          margin-top: 20px;
          padding: 20px;
          box-sizing: border-box;
          div {
            margin-top: 6px;
            p {
              text-align: left;
              margin-bottom: 4px;
            }
          }
        }

      }

      .indexCharts {
          width:  calc(100% - 290px);
          overflow: hidden;
          height: 730px;
          background-color: white;
          box-sizing: border-box;
          padding: 20px;
          .categoryCharts {
            width: 100%;
            height: 350px;
            #categoryCharts {
              width: 100%;
              height: 350px;
            }
          }
          .otherCharts {
            width: 100%;
            height: 350px;
            overflow-y: hidden;
            display: flex;
            justify-content: space-between;
            #verticalCharts {
              width: 50%;
              height: 350px;
            }
            #circleCharts {
              width: 50%;
              height: 350px;
            }
          }
      }
  }

  .numberMeaage {
    width: calc(100% - 280px);
    height: 530px;
    background-color: red;
  }

</style>
